<template>
  <div class="container">
    <van-empty v-if="todoList.length === 0" description="暂无待办">
      <!-- <van-button round type="primary" class="bottom-button" @click="onClickAdd">新建待办</van-button> -->
    </van-empty>

    <template v-else>
      <div class="head-view">
        <van-row>共{{ todoList.length }}项待办</van-row>
        <div style="color: #436bff" @click="onClickAdd" v-show="false">
          新增待办
        </div>
      </div>
      <div class="session-view" v-for="(todo, index) in todoList" :key="index">
        <div>
          <van-checkbox
            class="checkbox"
            v-model="todo.done"
            shape="square"
          ></van-checkbox>
        </div>
        <div class="content-view">
          <div>{{ todo.content }}</div>
          <div class="end-time" v-show="todo.endTime.length > 0">
            截止时间: {{ todo.endTime }}
          </div>
          <div class="executor">执行人: {{ todo.executor }}</div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { mapState } from "pinia";
import { useMinutesStore } from "@/store";

export default {
  name: "AnalysisTodo",
  data() {
    return {
      show: false,
      checked: false,
      options: [
        {
          label: "回顾",
          value: "revice"
        },
        {
          label: "编辑",
          value: "edit"
        },
        {
          label: "删除",
          value: "delete"
        }
      ]
    };
  },

  methods: {
    onClickAdd() {
      console.log("add todo");
      this.show = true;
    },

    onClickMore(todo) {
      console.log("onClickMore: ", todo);
    },

    linkTo(item) {
      console.log("link to item: ", item);
    },

    onSelect(options) {
      console.log("onSelect: ", options);
    }
  },

  computed: {
    ...mapState(useMinutesStore, {
      todoList: "todoList"
    })
  }
};
</script>

<style lang="less" scoped>
.container {
  background-color: #fff;
  padding: 0 15px;
}

.head-view {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-weight: 400;
  font-size: 14px;
  color: #595959;
  line-height: 22px;
  height: 66px;
}

.session-view {
  display: flex;
  flex-direction: row;
  background: #f9fafc;
  border-radius: 8px;
  padding: 20px 15px;
  margin-bottom: 15px;
}

.content-view {
  margin: 0 12px;
  font-size: 14px;
  line-height: 24px;
  color: #262626;
  flex: 1;
}

.end-time {
  margin: 8px 0 4px 0;
  color: #8c8c8c;
}

.executor {
  color: #8c8c8c;
}

.checkbox {
  margin-top: 4px;
}

:deep .t-popover {
  background-color: white;
}

.custom__item {
  line-height: 36px;
  font-weight: 400;
  font-size: 16px;
  color: #262626;
}
</style>
